<style lang="scss">
  .handle {
    .el-main {
      padding: 0px 12px 12px 12px;
    }
    .el-tabs {
      width: 100%;
      .el-tabs__header {
        margin: 10px 12px;
        .el-tabs__item.is-active {
          border-bottom: 2px solid #409eff;
        }
      }
    }
  }
</style>

<template>
  <el-container class="handle">
    <!-- 状态导航 -->
    <el-tabs v-model="activeTabState"
             type="card"
             @tab-click="tabClick">
      <el-tab-pane name="111">
        <span slot="label"><i class="el-icon-edit"></i> 待办理</span>
        <handle-get ref="handleGet"></handle-get>
      </el-tab-pane>
      <el-tab-pane name="222">
        <span slot="label"><i class="el-icon-edit-outline"></i> 已办理</span>
        <handle-already ref="handleAlready"></handle-already>
      </el-tab-pane>
      <el-tab-pane name="333">
        <span slot="label"><i class="el-icon-zoom-out"></i> 已退回</span>
        <handle-back ref="handleBack"></handle-back>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script>
  import handleGet from './handle-get.vue'
  import handleAlready from './handle-already.vue'
  import handleBack from './handle-back.vue'

  export default {
    data () {
      return {
        activeTabState: '111'
      }
    },
    methods: {
      // tab 点击
      tabClick (tab, event) {
        switch (tab.name) {
          case '111':
            this.$refs.handleGet.doSearch()
            break
          case '222':
            this.$refs.handleAlready.initFn()
            break
          case '333':
            this.$refs.handleBack.initFn()
            break
        }
      }
    },
    components: {
      handleGet, handleAlready, handleBack
    }
  }
</script>
